<template>
  <div class="contianer">
    <table class="indexTable">
      <tr>
        <td colspan="5">
          <div>
            <!-- 主页logo缩小 -->
            <div class="card">
              <div class="photo">
                <!-- 小球动画 -->
                <div class="effect">
                  <div class="bigball"></div>
                  <div class="smallball"></div>
                </div>
              </div>
              <h2>围群--给读者的一封信</h2>
              <p>首先感谢使用围群的每一位小伙伴，本着求学的精神，互相学习的态度，围群将会无偿上传个人学习、做项目中遇到的问题总结，笔记，项目说明，以及源码等。
                由于本人现在还是一个学生，云服务器，数据库，文件存储等都是在力所能及的范围内进行的配置。若造成了网络卡顿还望谅解。如果在使用过程中发现bug,或者想要
                进行学术交流欢迎加qq群讨论：894435312<span>&nbsp;&nbsp;&nbsp;</span>
              </p>
              <!-- <p>说明：本博客网站为个人学习以及学术交流所制作，java功能，数据库设计，围群logo皆为个人设计，页面样式来自elementui组件库,部分图标来自阿里巴巴矢量图标库，若有侵权，请联系删除！</p> -->
              <a href="#" @click="toArticle()">开启围群之旅>></a>
            </div>

          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="systemNum">
            <div class="tagSum accessTag"></div>
            <div class="allNumber accessNum">
              <el-statistic group-separator="," :precision="0" :value="accessNum" title="访客"></el-statistic>
            </div>
          </div>
        </td>
        <td>
          <div class="systemNum">
            <div class="tagSum addAccessTag"></div>
            <div class="allNumber addAccessNum">
              <el-statistic group-separator="," :precision="0" :value="addAccessNum" title="7日内新增"></el-statistic>
            </div>
          </div>
        </td>
        <td>
          <div class="systemNum">
            <div class="tagSum atricleTag"></div>
            <div class="allNumber atricleNum">
              <el-statistic group-separator="," :precision="0" :value="atricleNum" title="文章"></el-statistic>
            </div>
          </div>
        </td>
        <td>
          <div class="systemNum">
            <div class="tagSum messageTag"></div>
            <div class="allNumber messageNum">
              <el-statistic group-separator="," :precision="0" :value="messageNum" title="评论"></el-statistic>
            </div>
          </div>
        </td>
        <td>
          <div class="systemNum">
            <div class="tagSum projectTag"></div>
            <div class="allNumber projectNum">
              <el-statistic group-separator="," :precision="0" :value="projectNum" title="项目"></el-statistic>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="5">
          <!-- <router-view /> -->
          <!-- <transition name="fade" mode="out-in">
            <keep-alive>
              <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
          </transition>
          <router-view v-if="!$route.meta.keepAlive"></router-view> -->
          <div id="allDataStatic"></div>
        </td>
      </tr>
      <!-- <tr>
        <td colspan="5">
          <div style="width: auto;height: 400px" id="accessNumInDay"></div>
        </td>
      </tr> -->
    </table>


    <!-- 备案号 -->
    <div class="filings">ICP证： <a class="filingsA" href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2023099000号</a>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import { $accountNumById } from '@/assets/api/user.js'
import { $accountAddAtSeven } from '@/assets/api/user.js'
import { $AllBlogNum } from '@/assets/api/user.js'
import { $allCommentNum } from '@/assets/api/user.js'
import { $allProjectNum } from '@/assets/api/user.js'
import { $tenYearData } from '@/assets/api/user.js'
export default {
  data() {
    return {
      showSessionId: '',
      src: '',
      like: true,
      accessNum: 0,
      addAccessNum: 0,
      atricleNum: 0,
      messageNum: 0,
      projectNum: 0,

      //每月访问人数统计
      // userInDaydataAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      // userInDaylistData: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149],
      // userInDayyMax: 200,
      // userInDaydataShadow: [],
      // yMax: 500,

      //统计一年内所有数据
      dataMap: {},

      //年份数据
      yearData: [
        // '2002-01-01',
        // '2003-01-01',
        // '2004-01-01',
        // '2005-01-01',
        // '2006-01-01',
        // '2007-01-01',
        // '2008-01-01',
        // '2009-01-01',
        // '2010-01-01',
        // '2011-01-01',
      ],
    };
  },
  mounted() {
    this.countResource();//资源统计

    //统计十年内所有数据
    this.dataMap.dataNote = this.dataFormatter([
      //max : 26600,
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ]);



    this.echartsInitAll();


    //每月访问人数统计
    // this.echartsInitAtMoonNum();
    // this.getDataShadow();
  },
  methods: {


    countResource() {
      $accountNumById().then((res) => {//访问人数统计
        if (res.data.success) {
          this.accessNum = res.data.data.accountNumById;
        }
      })
      $accountAddAtSeven().then((res) => {//访问人数统计
        if (res.data.success) {
          this.addAccessNum = res.data.data.accountAddAtSeven;
        }
      })
      $AllBlogNum().then((res) => {//文章总数统计
        if (res.data.success) {
          this.atricleNum = res.data.data.AllBlogNum;
        }
      })
      $allCommentNum().then((res) => {//评论总数统计
        if (res.data.success) {
          this.messageNum = res.data.data.allCommentNum;
        }
      })
      $allProjectNum().then((res) => {//项目总数统计
       
        if (res.data.success) {
          this.projectNum = res.data.data.allProjectNum;
        }
      })
    },



    toArticle() {
      this.$router.push({
        name: 'articleAdmin',
      })
    },

    //统计近10年内所有数据
    dataFormatter(obj) {
      // prettier-ignore
      var pList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      var temp;
      for (var year = 0; year <= 9; year++) {
        var max = 0;
        var sum = 0;
        temp = obj[year];
        for (var i = 0, l = temp.length; i < l; i++) {
          max = Math.max(max, temp[i]);
          sum += temp[i];
          obj[year][i] = {
            name: pList[i],
            value: temp[i]
          };
        }
        obj[year + 'max'] = Math.floor(max / 100) * 100;
        obj[year + 'sum'] = sum;
      }
      return obj;
    },



    async echartsInitAll() {
      $tenYearData().then((res) => {
        if (res.data.success) {
          this.dataMap.dataCode = this.dataFormatter(res.data.data.tenYearData.dataCode);
          this.dataMap.dataArticle = this.dataFormatter(res.data.data.tenYearData.dataArticle);
          this.dataMap.dataProject = this.dataFormatter(res.data.data.tenYearData.dataProject);
          this.dataMap.dataNewUser = this.dataFormatter(res.data.data.tenYearData.dataNewUser);
          this.dataMap.dataAllUser = this.dataFormatter(res.data.data.tenYearData.dataAllUser);

          this.yearData = res.data.data.yearData;

          try {
                      // console.log(this.dataMap.dataArticle);
          echarts.init(document.getElementById('allDataStatic')).setOption({
            baseOption: {
              timeline: {
                axisType: 'category',
                // realtime: false,
                // loop: false,
                autoPlay: false,
                // currentIndex: 2,
                playInterval: 1000,
                // controlStyle: {
                //     position: 'left'
                // },
                data: this.yearData,
                label: {
                  formatter: function (s) {
                    return new Date(s).getFullYear();
                  }
                }
              },
              title: {
                subtext: '近10年以来围群博客数据'
              },
              tooltip: {},
              legend: {
                left: 'right',
                data: ['文章', '笔记', '项目', '源码', '总人数', '新增人数'],
                // selected: {
                //   GDP: false,
                //   金融: false,
                //   房地产: false
                // }
              },
              calculable: true,
              grid: {
                top: 100,
                bottom: 100,
                right: 150,
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow',
                    label: {
                      show: true,
                      formatter: function (params) {
                        return params.value.replace('\n', '');
                      }
                    }
                  }
                }
              },
              xAxis: [
                {
                  type: 'category',
                  axisLabel: { interval: 0 },
                  data: [
                    '1月',
                    '2月',
                    '3月',
                    '4月',
                    '5月',
                    '6月',
                    '7月',
                    '8月',
                    '9月',
                    '10月',
                    '11月',
                    '12月',

                  ],
                  splitLine: { show: false }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '个数/条数/份数'
                }
              ],
              series: [
                { name: '文章', type: 'bar' },
                { name: '笔记', type: 'bar' },
                { name: '项目', type: 'bar' },
                { name: '源码', type: 'bar' },
                { name: '总人数', type: 'bar' },
                { name: '新增人数', type: 'bar' },
                {
                  name: '资源占比',
                  type: 'pie',
                  center: ['87%', '23%'],
                  radius: '20%',
                  z: 100
                }
              ]
            },
            options: [
              {
                title: { text: this.yearData[0].slice(0, 4) + '年围群数据统计' },
                series: [
                  { data: this.dataMap.dataArticle['0'] },
                  { data: this.dataMap.dataNote['0'] },
                  { data: this.dataMap.dataProject['0'] },
                  { data: this.dataMap.dataCode['0'] },
                  { data: this.dataMap.dataAllUser['0'] },
                  { data: this.dataMap.dataNewUser['0'] },
                  {
                    data: [
                      { name: '文章', value: this.dataMap.dataArticle['0sum'] },
                      { name: '笔记', value: this.dataMap.dataNote['0sum'] },
                      { name: '项目', value: this.dataMap.dataProject['0sum'] },
                      { name: '源码', value: this.dataMap.dataCode['0sum'] },
                    ]
                  }
                ]
              },
              {
                title: { text: this.yearData[1].slice(0, 4) + '年围群数据统计' },
                series: [
                  { data: this.dataMap.dataArticle['1'] },
                  { data: this.dataMap.dataNote['1'] },
                  { data: this.dataMap.dataProject['1'] },
                  { data: this.dataMap.dataCode['1'] },
                  { data: this.dataMap.dataAllUser['1'] },
                  { data: this.dataMap.dataNewUser['1'] },

                  {
                    data: [
                      { name: '文章', value: this.dataMap.dataArticle['1sum'] },
                      { name: '笔记', value: this.dataMap.dataNote['1sum'] },
                      { name: '项目', value: this.dataMap.dataProject['1sum'] },
                      { name: '源码', value: this.dataMap.dataCode['1sum'] }
                    ]
                  }
                ]
              },
              {
                title: { text: this.yearData[2].slice(0, 4) + '年围群数据统计' },
                series: [
                  { data: this.dataMap.dataArticle['2'] },
                  { data: this.dataMap.dataNote['2'] },
                  { data: this.dataMap.dataProject['2'] },
                  { data: this.dataMap.dataCode['2'] },
                  { data: this.dataMap.dataAllUser['2'] },
                  { data: this.dataMap.dataNewUser['2'] },
                  {
                    data: [
                      { name: '文章', value: this.dataMap.dataArticle['2sum'] },
                      { name: '笔记', value: this.dataMap.dataNote['2sum'] },
                      { name: '项目', value: this.dataMap.dataProject['2sum'] },
                      { name: '源码', value: this.dataMap.dataCode['2sum'] }
                    ]
                  }
                ]
              },
              {
                title: { text: this.yearData[3].slice(0, 4) + '年围群数据统计' },
                series: [
                  { data: this.dataMap.dataArticle['3'] },
                  { data: this.dataMap.dataNote['3'] },
                  { data: this.dataMap.dataProject['3'] },
                  { data: this.dataMap.dataCode['3'] },
                  { data: this.dataMap.dataAllUser['3'] },
                  { data: this.dataMap.dataNewUser['3'] },
                  {
                    data: [
                      { name: '文章', value: this.dataMap.dataArticle['3sum'] },
                      { name: '笔记', value: this.dataMap.dataNote['3sum'] },
                      { name: '项目', value: this.dataMap.dataProject['3sum'] },
                      { name: '源码', value: this.dataMap.dataCode['3sum'] }
                    ]
                  }
                ]
              },
              {
                title: { text: this.yearData[4].slice(0, 4) + '年围群数据统计' },
                series: [
                  { data: this.dataMap.dataArticle['4'] },
                  { data: this.dataMap.dataNote['4'] },
                  { data: this.dataMap.dataProject['4'] },
                  { data: this.dataMap.dataCode['4'] },
                  { data: this.dataMap.dataAllUser['4'] },
                  { data: this.dataMap.dataNewUser['4'] },
                  {
                    data: [
                      { name: '文章', value: this.dataMap.dataArticle['4sum'] },
                      { name: '笔记', value: this.dataMap.dataNote['4sum'] },
                      { name: '项目', value: this.dataMap.dataProject['4sum'] },
                      { name: '源码', value: this.dataMap.dataCode['4sum'] }
                    ]
                  }
                ]
              },
              {
                title: { text: this.yearData[5].slice(0, 4) + '年围群数据统计' },
                series: [
                  { data: this.dataMap.dataArticle['5'] },
                  { data: this.dataMap.dataNote['5'] },
                  { data: this.dataMap.dataProject['5'] },
                  { data: this.dataMap.dataCode['5'] },
                  { data: this.dataMap.dataAllUser['5'] },
                  { data: this.dataMap.dataNewUser['5'] },
                  {
                    data: [
                      { name: '文章', value: this.dataMap.dataArticle['5sum'] },
                      { name: '笔记', value: this.dataMap.dataNote['5sum'] },
                      { name: '项目', value: this.dataMap.dataProject['5sum'] },
                      { name: '源码', value: this.dataMap.dataCode['5sum'] }
                    ]
                  }
                ]
              },
              {
                title: { text: this.yearData[6].slice(0, 4) + '年围群数据统计' },
                series: [
                  { data: this.dataMap.dataArticle['6'] },
                  { data: this.dataMap.dataNote['6'] },
                  { data: this.dataMap.dataProject['6'] },
                  { data: this.dataMap.dataCode['6'] },
                  { data: this.dataMap.dataAllUser['6'] },
                  { data: this.dataMap.dataNewUser['6'] },
                  {
                    data: [
                      { name: '文章', value: this.dataMap.dataArticle['6sum'] },
                      { name: '笔记', value: this.dataMap.dataNote['6sum'] },
                      { name: '项目', value: this.dataMap.dataProject['6sum'] },
                      { name: '源码', value: this.dataMap.dataCode['6sum'] }
                    ]
                  }
                ]
              },
              {
                title: { text: this.yearData[7].slice(0, 4) + '年围群数据统计' },
                series: [
                  { data: this.dataMap.dataArticle['7'] },
                  { data: this.dataMap.dataNote['7'] },
                  { data: this.dataMap.dataProject['7'] },
                  { data: this.dataMap.dataCode['7'] },
                  { data: this.dataMap.dataAllUser['7'] },
                  { data: this.dataMap.dataNewUser['7'] },
                  {
                    data: [
                      { name: '文章', value: this.dataMap.dataArticle['7sum'] },
                      { name: '笔记', value: this.dataMap.dataNote['7sum'] },
                      { name: '项目', value: this.dataMap.dataProject['7sum'] },
                      { name: '源码', value: this.dataMap.dataCode['7sum'] }
                    ]
                  }
                ]
              },
              {
                title: { text: this.yearData[8].slice(0, 4) + '年围群数据统计' },
                series: [
                  { data: this.dataMap.dataArticle['8'] },
                  { data: this.dataMap.dataNote['8'] },
                  { data: this.dataMap.dataProject['8'] },
                  { data: this.dataMap.dataCode['8'] },
                  { data: this.dataMap.dataAllUser['8'] },
                  { data: this.dataMap.dataNewUser['8'] },
                  {
                    data: [
                      { name: '文章', value: this.dataMap.dataArticle['8sum'] },
                      { name: '笔记', value: this.dataMap.dataNote['8sum'] },
                      { name: '项目', value: this.dataMap.dataProject['8sum'] },
                      { name: '源码', value: this.dataMap.dataCode['8sum'] }
                    ]
                  }
                ]
              },
              {
                title: { text: this.yearData[9].slice(0, 4) + '年围群数据统计' },
                series: [
                  { data: this.dataMap.dataArticle['9'] },
                  { data: this.dataMap.dataNote['9'] },
                  { data: this.dataMap.dataProject['9'] },
                  { data: this.dataMap.dataCode['9'] },
                  { data: this.dataMap.dataAllUser['9'] },
                  { data: this.dataMap.dataNewUser['9'] },
                  {
                    data: [
                      { name: '文章', value: this.dataMap.dataArticle['9sum'] },
                      { name: '笔记', value: this.dataMap.dataNote['9sum'] },
                      { name: '项目', value: this.dataMap.dataProject['9sum'] },
                      { name: '源码', value: this.dataMap.dataCode['9sum'] }
                    ]
                  }
                ]
              }
            ]

          })
          } catch (error) {
            // console.error("操作过快");
          }


        }
      });

    },




    //每月访问人数统计
    // getDataShadow() {
    //   for (let i = 0; i < this.userInDaylistData.length; i++) {
    //     this.userInDaydataShadow.push(this.yMax);
    //   }
    // },
    // echartsInitAtMoonNum() {
    //   echarts.init(document.getElementById('accessNumInDay')).setOption({
    //     title: {
    //       text: '近10个月以来每个月的访问人数',
    //       subtext: 'Number of visitors per month in the past 10 months'
    //     },
    //     xAxis: {
    //       data: this.userInDaydataAxis,
    //       axisLabel: {
    //         inside: true,
    //         color: '#fff'
    //       },
    //       axisTick: {
    //         show: false
    //       },
    //       axisLine: {
    //         show: false
    //       },
    //       z: 10
    //     },
    //     yAxis: {
    //       axisLine: {
    //         show: false
    //       },
    //       axisTick: {
    //         show: false
    //       },
    //       axisLabel: {
    //         color: '#999'
    //       }
    //     },
    //     dataZoom: [
    //       {
    //         type: 'inside'
    //       }
    //     ],
    //     staticseries: [
    //       {
    //         type: 'bar',
    //         showBackground: true,
    //         itemStyle: {
    //           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //             { offset: 0, color: '#83bff6' },
    //             { offset: 0.5, color: '#188df0' },
    //             { offset: 1, color: '#188df0' }
    //           ])
    //         },
    //         emphasis: {
    //           itemStyle: {
    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //               { offset: 0, color: '#2378f7' },
    //               { offset: 0.7, color: '#2378f7' },
    //               { offset: 1, color: '#83bff6' }
    //             ])
    //           }
    //         },
    //         data: this.userInDaylistData
    //       }
    //     ]
    //   })
    // },



  }
};
</script>


<!--背景颜色  rgb(238,240,242) -->
<!-- 标签颜色 rgb(255,255,255) -->

<style scoped>
/*粘性小球动画*/
.effect {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;

  /* 设置对比度 */
  filter: contrast(10);
  margin: 0 auto;
  top: 20%;
}

.bigball,
.smallball {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  border-radius: 50%;
  /* 设置模糊度，配合上面的contrast来显示圆球的粘性效果 */
  /*filter: blur(5px);*/
}


/*rgb(0,255,255)*/
.bigball {
  width: 200px;
  height: 200px;

}

.smallball {
  width: 80px;
  height: 80px;
  /*background-color: rgb(0,255,255);*/
  /* 动画：名称 时长 infinite是无限次播放 */
  /*animation: ball 3s infinite;*/
}

/* 我们来定义小球的动画 */
@keyframes ball {

  0% {
    left: 160px;
    width: 80px;
    height: 80px;
  }

  50% {
    left: 160px;
    width: 100px;
    height: 100px;
  }

  100% {
    left: 160px;
    width: 110px;
    height: 110px;
  }
}





/*主页信息过渡动画*/
.card {
  /* 相对定位 */
  position: relative;
  width: 1070px;
  height: 450px;
  margin-left: 70px;
  background-color: rgb(133, 217, 216);
  border-radius: 20px;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 弹性布局 */
  display: flex;
  /* 元素纵向排列 */
  flex-direction: column;
  /* 居中 */
  align-items: center;
  color: black;
  /* 阴影 */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  /* 不让其被挤压 */
  flex-shrink: 0;
}


.card .photo img {
  width: 100%;
  height: 100%;
  /* 保持原有尺寸比例，裁切长边 */
  object-fit: cover;
}

/* 默认大图 */
.card .photo {
  /* 绝对定位 */
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0%;
  overflow: hidden;
  /* 动画过渡 */
  transition: 0.5s;

  /*logo的初始位置*/
  background-image: url(../../assets/logo.svg);
  background-color: rgb(133, 217, 216);
  background-repeat: no-repeat;
  background-size: 300px;
  background-position: 50%, 50%;
}

/* 鼠标移入变小图 */
.card:hover .photo {
  background-image: url(../../assets/logo.svg);
  background-repeat: no-repeat;
  background-color: rgb(0, 255, 255);
  background-size: 110px;
  top: 30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);*/
}

.card:hover .effect {
  display: none;
}




.card h2 {
  margin-top: 170px;
  width: 80%;
  border-bottom: 1px solid rgba(59, 66, 68, 0.3);
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.card p {
  width: 90%;
  text-indent: 32px;
  font-size: 16px;
  margin-bottom: 15px;
  line-height: 30px;
  text-align: center;
}

.card a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 32px;
  border-radius: 8px;
}

.card a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}






/*主页样式*/
.contianer {
  background-color: #e6e8e8;
  padding: 10px;
  min-width: 1200px;
}

.indexTable {
  margin: 0 auto;
}


.index {
  background: linear-gradient(to top, #537895, #09203f);
  height: 550px;
  width: 1170px;
  margin-left: 20px;
}

#allDataStatic {
  background-color: #ffecec;
  padding: 40px;
  height: 550px;
  margin-left: 60px;
  margin-top: 60px;
  width: 1000px;
}



#accessNumInDay {
  background-color: #ffecec;
  padding: 40px;
  margin-top: 80px;
}


td {
  margin: 10px;
}


.systemNum {
  width: 200px;
  height: 100px;
  margin: 20px;
  margin-top: 50px;
  background-color: #ffecec;
  position: relative;
  user-select: none;
}


.tagSum {
  background-size: 65px;
  width: 65px;
  height: 65px;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  top: 20px;
  left: 10px;
}

.allNumber {
  display: inline-block;
  position: absolute;
  top: 30px;
  left: 100px;
}

.accessTag {
  background-image: url("../../assets/images/index/accessUserNum.svg");
}

.addAccessTag {
  background-image: url("../../assets/images/index/addAccessNum.svg");
}

.atricleTag {
  background-image: url("../../assets/images/index/articleNum.svg");
}

.messageTag {
  background-image: url("../../assets/images/index/messageNum.svg");
}

.projectTag {
  background-image: url("../../assets/images/index/project.svg");
}

.filings {
  text-align: center;
  margin-top: 30px;
  color: #979595;
}

.filings :hover {
  text-align: center;
  margin-top: 30px;
  color: rgb(122, 208, 208);

}

.filingsA {
  text-decoration: none;
  color: #979595;
}

.filingsA :hover {
  color: aqua;
  text-decoration: none;
}
</style>



<style></style>
  